<template>
    <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget"
                       :parent-list="parentList"
                       :index-of-parent-list="indexOfParentList">

        <div :key="widget.id" class="el-dialog-widget"
             :class="{'selected': selected}" @click.stop="selectWidget(widget)">
            <div class="dialog_header">
                {{ options.label }}

                <div class="close_icon" v-if="options.attributeED.showClose">
                    <i class="el-icon-close"></i>
                </div>
            </div>

            <div class="dialog_con">
                <draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
                           handle=".drag-handler"
                           @add="(evt) => onContainerDragAdd(evt, widget.widgetList)"
                           @update="onContainerDragUpdate" :move="checkContainerMove">
                    <transition-group name="fade" tag="div" class="form-widget-list">
                        <template v-for="(subWidget, swIdx) in widget.widgetList">
                            <template v-if="'container' === subWidget.category">
                                <component :is="subWidget.type + '-widget'" :widget="subWidget" :designer="designer"
                                           :key="subWidget.id" :parent-list="widget.widgetList"
                                           :index-of-parent-list="swIdx" :parent-widget="widget"></component>
                            </template>
                            <template v-else>
                                <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="designer"
                                           :key="subWidget.id" :parent-list="widget.widgetList"
                                           :index-of-parent-list="swIdx" :parent-widget="widget"
                                           :design-state="true"></component>
                            </template>
                        </template>
                    </transition-group>
                </draggable>
            </div>

            <div class="dialog_footer" v-if="options.footerButton&&options.footerButton.length>0">
                <template v-for="{size,type,name} in options.footerButton">
                    <el-button :size="size" :type="type">{{ name }}</el-button>
                </template>
            </div>
        </div>
    </container-wrapper>
</template>

<script>
import Draggable from 'vuedraggable'
import i18n from "@/utils/i18n"
import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import refMixinDesign from "@/components/form-designer/refMixinDesign"

export default {
    name: "el-dialog-widget",
    componentName: 'ContainerWidget',
    mixins: [i18n, containerMixin, refMixinDesign],
    inject: ['refList', "that"],
    components: {
        ContainerWrapper,
        Draggable,

        ...FieldComponents,
    },
    props: {
        widget: Object,
        parentWidget: Object,
        parentList: Array,
        indexOfParentList: Number,
        designer: Object,
    },
    data() {
        return {}
    },
    computed: {
        selected() {
            return this.widget.id === this.designer.selectedId
        },

        customClass() {
            return this.widget.options.customClass || ''
        },

        options() {
            return this.widget.options
        }

    },
    watch: {},
    created() {
        this.initRefList()
    },
    mounted() {
    },
    methods: {}
}
</script>

<style lang="scss" scoped>
.el-dialog-widget {
  margin: 20px 2px 10px;
  min-height: 200px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);

  .form-widget-list {
    min-height: 200px;
  }

  .dialog_header {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    padding: 10px 20px;
    background: #f1f2f3;
    position: relative;

    .close_icon {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }

  .dialog_con {
    padding: 10px 20px;
    box-sizing: border-box;
  }

  .dialog_footer {
    border: 1px dashed #000;
    padding: 10px 20px 20px;
    box-sizing: border-box;
    text-align: right;

    .form-footerBtnList-list {
      min-height: 32px;
    }
  }
}

.el-dialog-widget.selected {
  outline: 2px solid $--color-primary !important;
}
</style>
